<template>
  <view class="container">
    <scroll-view class="content" scroll-y>
      <view
        v-for="item in items"
        :key="item.pid"
        class="list-item cursor-pointer"
        @click="showModal(item)"
      >
        <view class="item-left">
          <text>{{item.pid}}.{{item.pname}}</text>
        </view>
        <view class="item-right">
          <text class="value">{{item.pvalue}}</text>
          <uni-icons type="right" size="16" color="#999" />
        </view>
      </view>

      <view class="tips">
        <text>1、请确保数据输入完整。</text>
        <text>2、如果不确定，请联系客服。</text>
      </view>
    </scroll-view>

    <uni-popup ref="popup" type="center">
      <view class="modal">
        <view class="modal-title">{{currentItem.pname}}</view>
        <view class="modal-input">
          <input
            type="number"
            v-model="inputValue"
            placeholder="请输入数值"
            focus
          />
        </view>
        <view class="modal-buttons">
          <button class="btn cancel" @click="handleCancel">取消</button>
          <button class="btn confirm" @click="handleConfirm">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useRoute
	} from 'vue-router'; // 导入路由对象
	import wbrm from "../../api/wanbi/wbrm"

const popup = ref();
const inputValue = ref("");
const currentItem = ref({
  pid: 0,
  pname: "",
  pvalue: 0,
});

const items = ref([
  { pid: 1, pname: "承力索座宽", pvalue: 80 },
  { pid: 2, pname: "承力索座上面高", pvalue: 40 }
]);

	// 转换函数
	const transformData = (rawData: any) => {
		return rawData.map((item: any) => ({
			pid: item.pid,
			pname: item.pname,
			pvalue:item.pvalue
		}))
	};

	// 定义响应式变量
	const currentType = ref < number > (0); // 初始化默认值
	// 获取路由对象
	const route = useRoute();
	//生命周期函数
	onMounted(() => {
		// 从路由 query 中获取 type 参数
		const type = route.query.type;
		// 类型检查和转换
		if (type !== undefined && typeof type === 'string') {
		 currentType.value = parseInt(type);
		}
		wbrm.listByPId(currentType.value).then((res: any) => {
			console.log(res)
			// 响应式数据
			items.value = transformData(res.data);
		})
	})

const showModal = (item) => {
  currentItem.value = item;
  inputValue.value = String(item.value);
  popup.value.open();
};

const handleCancel = () => {
  popup.value.close();
};

const handleConfirm = () => {
  const value = Number(inputValue.value);
  if (!isNaN(value)) {
	currentItem.value.pvalue=value;
	wbrm.updata(currentItem.value);
  }
  popup.value.close();
};

const goBack = () => {
  uni.navigateBack();
};
</script>

<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f8f8f8;
}

.header {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.back {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.right-icons {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.content {
  flex: 1;
  overflow: auto;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.item-left {
  font-size: 14px;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
}

.value {
  font-size: 14px;
  color: #666;
  margin-right: 20rpx;
}

.tips {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.tips text {
  font-size: 12px;
  color: #999;
}

.modal {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-title {
  padding: 40rpx;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #eee;
}

.modal-input {
  padding: 30rpx;
}

.modal-input input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 14px;
}

.modal-buttons {
  display: flex;
  border-top: 1px solid #eee;
}

.btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 16px;
  background: none;
}

.btn::after {
  border: none;
}

.cancel {
  color: #666;
  border-right: 1px solid #eee;
}

.confirm {
  color: #007aff;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
